<style type="text/css">
#wpcontent{
	background-color:#fff;
}

.mm-input-text {
	display: block;
    border: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    border-radius: 2px;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
</style>
<div class="wrap" style="width:auto;">

	<h2>列表</h2>
	<table class="layui-hide" id="wmd_list" lay-filter="tableFilter"></table>
</div>

<script type="text/javascript">
layui.config({
  version: '1615206508214' //为了更新 js 缓存，可忽略
});
 
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
///
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块
  let $ = layui.jquery;
  
  //向世界问个好
  // layer.ready(function(){
  //   layer.msg('Hello World');
  // });
  
  //执行一个 table 实例
table.render({
    elem: '#wmd_list'
    ,height: 420
    ,url: '/wp-json/wp-multi-domain/v1/list' //数据接口
    ,title: '列表'
    ,page: true //开启分页
    // ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,toolbar: "#toolbarTpl"
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'domain', title: '域名', width:200}
      ,{field: 'theme', title: '主题', width: 300, sort: true}
      ,{field: 'platform', title: '平台', width:80, sort: true}
      ,{field: 'updated_time', title: '更新时间', width:180, sort: true}
      ,{field: 'created_time', title: '创建', width:180, sort: true}
      ,{title: "操作",fixed: 'right', width: 165, align:'center', toolbar: '#opTpl'}
    ]]
});
  
//监听头工具栏事件
table.on('toolbar(tableFilter)', function(obj){
	var checkStatus = table.checkStatus(obj.config.id)
	,data = checkStatus.data; //获取选中的数据
	switch(obj.event){
	  case 'add':add();break;
	  case 'update':
	    if(data.length === 0){
	      layer.msg('请选择一行');
	    } else if(data.length > 1){
	      layer.msg('只能同时编辑一个');
	    } else {
	      layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
	    }
	  break;
	  case 'delete':
	    if(data.length === 0){
	      layer.msg('请选择一行');
	    } else {
	      layer.msg('删除');
	    }
	  break;
	};
});


table.on("tool(tableFilter)", function (obj) {
	let data = obj.data;
	switch (obj.event) {
		case "updateById":updateById(data.id);break;
		case "deleteById":deleteById(data.id);break;
	}
});

function add() {
	layer.open({
		type: 2
        ,title: '添加' //不显示标题栏
        ,closeBtn: 2
        ,area: ['350px', '500px']
        ,shade: 0
        ,maxmin: true
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        // ,btn: ['火速围观', '残忍拒绝']
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '/wp-json/wp-multi-domain/v1/add'
	});
}

function updateById(id) {
	layer.open({
		type: 2
        ,title: '添加' //不显示标题栏
        ,closeBtn: 2
        ,area: ['350px', '500px']
        ,shade: 0
        ,maxmin: true
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        // ,btn: ['火速围观', '残忍拒绝']
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '/wp-json/wp-multi-domain/v1/add?id='+id
	});
}

function deleteById(id) {

	$.post("/wp-json/wp-multi-domain/v1/delete_item",{id:id}, function(response){
		layer.msg('删除成功!');
		if (response['code'] == 0){
			setTimeout(function(){
				parent.location.reload(true)
			},2000);
		} else {
			layer.msg(response['msg']);
		}
	});
}
///
});
</script>

<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
	</div>
</script>

<!-- 行工具栏模板 -->
<script type="text/html" id="opTpl">
	<a href="javascript:" title="编辑" lay-event="updateById"><i class="layui-icon">&#xe642;</i></a>
	<a href="javascript:" title="删除" lay-event="deleteById"><i class="layui-icon">&#xe640;</i></a>
</script>